<template>
  <div class="px-4 py-2.5 flex-grow overflow-auto">
    <div v-for="(item, index) in props.scenarioListData" :key="index">
      <div v-if="item.type == 'title'" class="pb-2.5"> {{ item.title }} </div>
      <div v-if="item.type == 'list'">
        <div
          class="flex mb-2.5 py-2.5 px-4 rounded-lg border-solid"
          :class="
            props.selectedCard == item.key
              ? 'border-2  border-indigo-600  bg-indigo-200'
              : 'border  border-gray-300'
          "
          @click="handleCard(item.key)"
        >
          <img style="width: 32px; height: 32px" :src="item.icon" />
          <div class="ml-2.5">
            <div class="font-bold"> {{ item.name }} </div>
            <div class="text-xs mt-1.25"> {{ item.synopsis }} </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
const props = defineProps<{
  scenarioListData: {
    name?: string
    title?: string
    key: string
    icon?: string
    type: string
    synopsis?: string
  }[]
  selectedCard?: string
}>()

// 切换卡片
const emit = defineEmits(['handleCard'])
const handleCard = (Key) => {
  emit('handleCard', Key)
}
</script>
